<% participants = participants(@episode) %>

<article class="episode">
  <header class="episode-header">
    <div class="episode-header-wrap">
      <h2 class="episode-header-show_title">
        <%= link @episode.podcast.name, to: Routes.podcast_path(@conn, :show, @episode.podcast.slug) %>
        <%= if number = number(@episode) do %>
          – Episode #<%= number %>
        <% end %>
      </h2>
      <h1 class="episode-header-title">
        <%= @episode.title %>
      </h1>
      <%= if @episode.subtitle do %>
        <h3 class="episode-header-subtitle"><%= @episode.subtitle %></h3>
      <% end %>

      <div class="episode-header-guests">
        <h4 class="visually_hidden">Featuring</h4>
        <div class="avatar_list">
          <%= for person <- participants do %>
            <%= link to: PersonView.profile_path(person), class: "avatar_list-item", title: person.name do %>
              <%= SharedHelpers.lazy_image(PersonView.avatar_url(person), person.name, width: 50, height: 50) %>
              <p><%= person.name |> String.split(" ") |> List.first() %></p>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>

    <div class="episode-header-toolbar">
      <%= render("_play_bar.html", assigns) %>
    </div>

    <%= link("All Episodes", to: Routes.podcast_path(@conn, :show, @episode.podcast.slug), class: "episode-header-all_episodes_button") %>
  </header>

  <div class="episode-body">
    <div class="episode-body-summary">
      <% dark_logo_sponsorships = sponsorships_with_dark_logo(@episode) %>
      <%= if Enum.any?(dark_logo_sponsorships) do %>
        <aside class="episode-body-summary-sponsors">
          <h3>Brought to you by</h3>
          <div class="episode-body-summary-sponsors-list">
          <%= for episode_sponsor <- dark_logo_sponsorships do %>
            <%= link to: episode_sponsor.link_url, title: episode_sponsor.sponsor.name, rel: "sponsored" do %>
              <%= SharedHelpers.lazy_image(SponsorView.logo_url(episode_sponsor.sponsor, :dark_logo, :small), "#{episode_sponsor.sponsor.name} Logo") %>
            <% end %>
          <% end %>
          </div>
        </aside>
      <% end %>

      <div class="episode-body-summary-description richtext">
        <%= @episode.summary |> SharedHelpers.md_to_html() |> raw() %>
      </div>

      <div class="episode-body-summary-cta richtext">
        <p><a href="<%= Routes.page_path(@conn, :++) %>" title="Join Changelog++">Changelog++ <%= plusplus_cta(@episode) %> Join!</a></p>
      </div>

      <ul class="episode-body-summary-meta">
        <li><%= TimeView.rounded_minutes(@episode.audio_duration) %> minutes</li>
      <%= if @episode.recorded_at do %>
        <li>Recorded <time datetime="<%= @episode.published_at %>"><%= TimeView.pretty_date(@episode.recorded_at) %></time></li>
      <% end %>
        <li>Published <time datetime="<%= @episode.published_at %>"><%= TimeView.pretty_date(@episode.published_at) %></time></li>
        <li><a href="<%= audio_url(@episode) %>" download title="Download MP3">Download (<%= megabytes(@episode) %>MB)</a></li>
        <li><a href="#transcript" title="Jump to transcript">Transcript</a></li>
        <li><%= admin_edit_link(@conn, @current_user, @episode) %></li>
      </ul>

      <%= if Enum.any?(@episode.topics) do %>
        <div class="episode-body-summary-tags">
          <ul class="tags">
          <%= for topic <- @episode.topics do %>
            <li class="tags-item"><%= link topic.name, to: Routes.topic_path(@conn, :show, topic.slug), title: "View #{topic.name}" %></li>
          <% end %>
          </ul>
        </div>
      <% end %>
    </div>

    <div class="episode-body-details episode-body-details--<%= @podcast.slug %>">
    <%= if Enum.any?(participants) do %>
      <section class="episode-body-section">
        <a id="featuring" class="anchor"></a>
        <header class="section_heading">
          <h3 class="section_heading-text">Featuring</h3>
        </header>
        <div class="richtext richtext--small">
          <ul>
          <%= for person <- participants do %>
            <li><%= person.name %> &ndash; <%= person |> PersonView.list_of_links |> raw %></li>
          <% end %>
          </ul>
        </div>
      </section>
    <% end %>

    <%= if Enum.any?(@episode.episode_sponsors) do %>
      <section class="episode-body-section">
        <a id="sponsors" class="anchor"></a>
        <header class="section_heading">
          <h3 class="section_heading-text">Sponsors</h3>
        </header>
        <div class="richtext richtext--small">
          <%= for sponsor <- @episode.episode_sponsors do %>
            <p>
              <strong><%= link(sponsor.title, to: sponsor.link_url, rel: "sponsored") %></strong> – <%= sponsor.description |> SharedHelpers.md_to_html() |> HtmlKit.put_sponsored() |> SharedHelpers.sans_p_tags() |> raw() %>
            </p>
          <% end %>
        </div>
      </section>
    <% end %>

    <%= if @episode.notes do %>
      <section class="episode-body-section">
        <a id="notes" class="anchor"></a>
        <header class="section_heading">
          <h3 class="section_heading-text">Notes &amp; Links</h3>
          <p class="section_heading-note"><%= link("📝 Edit Notes", to: show_notes_source_url(@episode), title: "Edit the show notes on GitHub", rel: "external") %></p>
        </header>
        <div class="richtext richtext--small">
          <%= @episode.notes |> SharedHelpers.md_to_html() |> raw() %>
        </div>
      </section>
    <% end %>

    <%= if Enum.any?(@episode.audio_chapters) do %>
      <section class="episode-body-section">
        <a id="chapters" class="anchor"></a>
        <header class="section_heading">
          <h3 class="section_heading-text">Chapters</h3>
        </header>
        <div class="richtext richtext--small">
          <table>
            <thead hidden>
              <tr>
                <td>Chapter Number</td>
                <td>Chapter Start Time</td>
                <td>Chapter Title</td>
              </tr>
            </thead>
            <tbody>
            <%= for {chapter, index} <- Enum.with_index(@episode.audio_chapters, 1) do %>
              <tr data-chapter="<%= @episode.id %>-<%= index %>">
                <td style="width: 5%"><%= index %></td>
                <td style="width: 10%">
                  <a href="#t=<%= round(chapter.starts_at) %>" title="Play episode starting at '<%= chapter.title %>'"><%= TimeView.duration(chapter.starts_at) %></a>
                </td>
                <td style="width: 85%">
                <%= if Changelog.StringKit.present?(chapter.link_url) do %>
                  <%= link(chapter.title, to: chapter.link_url, rel: "nofollow") %>
                <% else %>
                  <%= chapter.title %>
                <% end %>
                </td>
              </tr>
            <% end %>
            </tbody>
          </table>
        </div>
      </section>
    <% end %>

      <section class="episode-body-section">
        <a id="transcript" class="anchor"></a>
        <header class="section_heading">
          <h3 class="section_heading-text">Transcript</h3>
          <p class="section_heading-note">
          <%= if Enum.any?(@episode.transcript) do %>
            <%= link("📝 Edit Transcript", to: transcript_source_url(@episode), title: "Edit the transcript on GitHub", rel: "external") %>
          <% else %>
            <%= if published_before_transcripts?(@episode) do %>
              <%= link("⌛️ Legacy Episode", to: transcript_repo_url(@episode), title: "Our transcripts on GitHub", rel: "external") %>
            <% else %>
              <%= link("⏰ Coming Soon", to: transcript_repo_url(@episode), title: "Our transcripts on GitHub", rel: "external") %>
            <% end %>
          <% end %>
          </p>
        </header>

        <div class="transcript">
        <%= if Enum.any?(@episode.transcript) do %>
          <div  class="transcript-item transcript-item--break">
            <div class="transcript-item-speaker">
              <%= link to: Routes.page_path(@conn, :about), title: "Changelog Media" do %>
                <div class="transcript-item-speaker-image transcript-item-speaker-image--changelog"></div>
              <% end %>
              <p class="transcript-item-speaker-name">Changelog</p>
            </div>
            <div class="transcript-item-text">
              <p><%= link("Play the audio", to: audio_url(@episode),
              data: [play: Routes.episode_path(@conn, :play, @episode.podcast.slug, @episode.slug)]) %> to listen along while you enjoy the transcript. 🎧</p>
            </div>
          </div>
          <%= for {part, index} <- Enum.with_index(@episode.transcript) do %>
            <% speaker = Enum.find(participants, fn(x) -> x.id == part["person_id"] end) %>
            <a id="transcript-<%= index %>" class="anchor"></a>
            <div class="transcript-item <%= unless speaker do %>transcript-item--break<% end %>">
              <div class="transcript-item-speaker">
              <%= if speaker do %>
                <%= link to: PersonView.profile_path(speaker), title: speaker.name do %>
                  <%= SharedHelpers.lazy_image(PersonView.avatar_url(speaker), "#{speaker.name} Says", class: "transcript-item-speaker-image", width: 36, height: 36) %>
                <% end %>
              <% else %>
                <div class="transcript-item-speaker-image"></div>
              <% end %>
                <p class="transcript-item-speaker-name"><%= link part["title"], to: "#transcript-#{index}" %></p>
              </div>
              <div class="transcript-item-text">
                <%= part["body"] |> SharedHelpers.md_to_html() |> PublicHelpers.with_timestamp_links() |> raw() %>
              </div>
            </div>
          <% end %>
          <div  class="transcript-item transcript-item--break">
            <div class="transcript-item-speaker">
              <%= link to: Routes.page_path(@conn, :about), title: "Changelog Media" do %>
                <div class="transcript-item-speaker-image transcript-item-speaker-image--changelog"></div>
              <% end %>
              <p class="transcript-item-speaker-name">Changelog</p>
            </div>
            <div class="transcript-item-text">
              <p>Our transcripts are <%= link "open source on GitHub", to: transcript_source_url(@episode), title: "View transcript source on GitHub", rel: "external" %>. Improvements are welcome. 💚</p>
            </div>
          </div>
        <% else %>
          <div  class="transcript-item transcript-item--break">
            <div class="transcript-item-speaker">
              <%= link to: Routes.page_path(@conn, :about), title: "Changelog Media" do %>
                <div class="transcript-item-speaker-image transcript-item-speaker-image--changelog"></div>
              <% end %>
              <p class="transcript-item-speaker-name">Changelog</p>
            </div>
            <div class="transcript-item-text">
            <%= if published_before_transcripts?(@episode) do %>
              <p>This episode was published back before we had transcripts. Thanks for understanding! 💚</p>
            <% else %>
              <p>We're hard at work on the transcript for this episode!
              <%= if @current_user do %>
                <%= if Subscription.is_subscribed(@current_user, @episode) do %>
                  <%= link("Click here", to: Routes.episode_path(@conn, :unsubscribe, @podcast.slug, @episode.slug), method: :post) %> to cancel your transcript notification. 💪</p>
                <% else %>
                  <%= link("Click here", to: Routes.episode_path(@conn, :subscribe, @podcast.slug, @episode.slug), method: :post) %> and we'll notify you when it's ready. 💪</p>
                <% end %>
              <% else %>
                <%= link("Sign in", to: Routes.sign_in_path(@conn, :new)) %> / <%= link("up", to: Routes.person_path(@conn, :join)) %> to access transcript notifications. 💪</p>
              <% end %>
            <% end %>
            </div>
          </div>
        <% end %>
        </div>
      </section>

      <div class="episode-body-pagination">
        <%= link("View all episodes", to: ~p"/#{@podcast.slug}", class: "button") %>
      </div>
    </div>
  </div>
</article>
